<template>
	<view class="main">
		<!-- #ifdef APP-PLUS -->
		<view class="perch place"></view>
		<view class="perch"></view>
		<!-- #endif -->
		<view class="header">
			<!-- <video 
			class="viedo"
			src="https://v3-web.douyinvod.com/f997ae832a794ca1f1b8a88097fce6e3/637395d5/video/tos/cn/tos-cn-ve-15c001-alinc2/oYBIAbrIhfAgVuQgUemzCkakXx8DhOxymAWNBX/?a=6383&ch=5&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1785&bt=1785&cs=0&ds=3&ft=rVWEerwwZRdfsCPo1PDS6kFgAX1tGshB4S9eF3vGiFr12ni7t&mime_type=video_mp4&qs=0&rc=N2Q6NDw4Mzk8N2g0OGVoZUBpM2tkOGg6ZmxpZzMzNGkzM0AwNjUzXjFhNS0xYWAwYDIzYSMxNmdkcjQwLm1gLS1kLS9zcw%3D%3D&l=2022111520360501015119819438137876&btag=10000" 
			controls></video> -->
			<view class="mark"></view>
			<view class="icon">
				<image class="img" src="../../../icon.png" mode=""></image>
			</view>
		</view>
		<view class="live_status">
			<u-avatar :src="liveData.userPic"></u-avatar>
			<text>20人在线</text>
		</view>
		<view class="content">
			<view class="tabs">
				<u-tabs :list="list" height="149" font-size="34" :is-scroll="false" active-color="#01BF5F" :current="current" @change="change"></u-tabs>
			</view>
			<scroll-view class="chat"></scroll-view>
		</view>
		<view class="chat_view" :class="{chat_active:activeView}">
			<view class="user_input">
				<input class="user_handle" type="text"  v-model="userInput" />
				<view class="select_icon" :class="{active:activeView}" @tap="cutActiveView">
					<image class="img" src="@/static/fileDetail/btn.png" mode=""></image>
				</view>
			</view>
			<view class="chat_handle">
				<view class="item" @tap="cameraClick">
					<image class="img" src="@/static/fileDetail/caema.png" mode=""></image>
				</view>
				<view class="item">
					<image class="img" src="@/static/fileDetail/photo.png" mode=""></image>
				</view>
				<view class="item">
					<image class="img" src="@/static/fileDetail/file.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				userInput:"",
				liveData:{},
				list:[
					{
						name: '介绍'
					}, 
					{
						name: '聊天'
					}, 
					{
						name: '提问'
					}
				],
				current: 1,
				activeView:true
			}
		},
		onLoad(option) {
			this.liveData = JSON.parse(option.val)
		},
		methods:{
			change(index) {
				this.current = index;
			},
			cutActiveView(){
				this.activeView = !this.activeView
			},
			cameraClick(){
				 uni.chooseImage({
				        count: 1,
				        sizeType: ['original', 'compressed'],
				        sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
				        success: (res)=> {
				         // console.log(res);
				        const tempFilePaths = res.tempFilePaths;
				        this.Imgs = res.tempFilePaths[0]
				        // this.$forceUpdate();
				        // console.log(this.Imgs)
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		position: relative;
	}
	.header{
		position: relative;
		font-size: 0rpx;
		overflow: hidden;
	}
	.live_status{
		width: 750rpx;
		height: 189rpx;
		background: #000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 0 90rpx 40rpx;
	}
	.content{
		position: relative;
		height: calc(100vh - 674rpx);
		.tabs{
			width: 750rpx;
			color: #fff;
			overflow: hidden;
			border-radius: 32rpx 32rpx 0 0;
			position: absolute;
			top: -42rpx;
			z-index: 1;
		}
		.chat{
			width: 100%;
			height: 100%;	
			background-color: #84878C;
		}
	}
	.mark{
		width: 100%;
		height: 480rpx;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		
	}
	.icon{
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.perch{
		width: 100vw;
		height: 54rpx;
	}
	.place{
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 20;
	}
	.img{
		
		font-size: 0rpx;
	}
	
	.chat_view{
		width: 749rpx;
		height: 142rpx;
		padding-left: 30rpx;
		background: #F5F5F5;
		position: absolute;
		bottom: -22rpx;
		left: 0;
		box-sizing: border-box;
		.user_input{
			padding-top: 21rpx;
			
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;
			transition: .4s;
			.user_handle{
				width: 540rpx;
				border-radius: 35rpx;
				overflow: hidden;
				background-color: #fff;
				padding: 16rpx 20rpx;
				margin-right: 52rpx;
			}
			.select_icon{
				width: 49rpx;
				height: 49rpx;
				font-size: 48rpx;
				border-radius: 50%;
				transition: .2s;
				&:active{
					transform: rotateZ(765deg);
				}
				
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.active{
				transform: rotateZ(765deg);
				&:active{
					transform: rotateZ(0deg);
				}
			}
		}
	}
	.chat_handle{
		display: flex;
		.item{
			width: 120rpx;
			height: 120rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 50rpx;
			.img{
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
	.chat_active{
		height: 340rpx;
	}
	
</style>